<template>
  <u-popup
    :show="
      isEmptinessClean ||
      isLiveClean ||
      isLiveDirty ||
      isEmptinessDirty ||
      isBooked ||
      isLocked ||
      isClocked
    "
    :round="44"
    @close="close"
  >
    <u-modal
      :show="showLock"
      showCancelButton
      closeOnClickOverlay
      @cancel="showLock = false"
      @close="showLock = false"
      :title="HomeViews?.Id"
      width="660rpx"
      @confirm="confirm"
    >
      <view>
        <view class="tip">锁房在下次夜审后自动解除，也可通过手动解锁解除</view>
        <u-form
          labelPosition="left"
          :model="lockForm"
          :rules="rules"
          ref="form1"
        >
          <u-form-item prop="lockForm.Reason">
            <!-- <u-textarea
            v-model="lockForm.Reason"
            style="background-color: #f5f7f9d5 !important; height: 180rpx;"
            placeholder="请输入锁房原因"
            border
          ></u-textarea> -->
            <textarea
              :value="lockForm.Reason"
              class="textarea"
              placeholder="请输入锁房原因"
              placeholder-class="placeholder"
            />
          </u-form-item>
          <u-form-item prop="lockForm.EndTime">
            <uni-datetime-picker
              type="date"
              :value="lockForm.EndTime"
              :start="+new Date()"
              end="2099-12-30"
              placeholder="请选择日期"
              @change="change"
            />
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
    <view class="popup">
      <view class="pop-title justify-between">
        <view>{{ HomeViews?.TheClass }}—{{ HomeViews?.Id }}</view>
        <image
          class="close"
          @click="close"
          src="@/static/images/room_status/close.png"
        ></image>
      </view>
      <u-divider></u-divider>
      <!-- 住脏/住净 -->
      <view v-if="isLiveClean || isLiveDirty" class="popup-content">
        <view class="balance align-center">余额：{{ balance }}</view>
        <view
          class="consumption justify-between align-center"
          v-if="HomeViews?.ReceiveView"
        >
          <view class="consumption-item">
            消费：{{ HomeViews?.ReceiveView.Xf }}
          </view>
          <view class="consumption-item">
            预授：{{ HomeViews?.ReceiveView.Ysq }}
          </view>
          <view class="consumption-item">
            付款：{{ HomeViews?.ReceiveView.Yj }}
          </view>
        </view>
        <view class="info" v-if="HomeViews?.ReceiveView">
          <view class="info-item">
            姓名：{{ HomeViews?.ReceiveView.ManName }}
          </view>
          <view class="info-item">
            联房余额：{{
              (HomeViews?.ReceiveView &&
                Summary?.LinkAccounts[HomeViews?.ReceiveView.LinkId]) ||
              0
            }}
          </view>
          <view class="info-item">已住：{{ stayDays }} 天</view>
          <view class="info-item">
            入住：{{ HomeViews?.ReceiveView.CheckIn }}
          </view>
          <view class="info-item">
            预离：{{ HomeViews?.ReceiveView.CheckOut }}
          </view>
        </view>
      </view>

      <!-- 预订 -->
      <view class="book-content" v-if="isBooked">
        <text>预订：</text>
        <text style="margin-right: 30rpx">
          {{ HomeViews?.BookView?.TheClass }}
        </text>
        <text>¥{{ HomeViews?.BookView?.Price }}</text>
      </view>

      <view v-if="isEmptinessClean" class="popup-bottom flex">
        <view class="button button-common flex-center" @click="lock">锁房</view>
        <view class="button button-common flex-center" @click="dirty(0)">
          置脏
        </view>
        <view class="button button-common flex-center" @click="book">预订</view>
        <view class="button button-common flex-center" @click="toReceive">
          入住
        </view>
      </view>

      <view v-if="isLiveClean" class="popup-bottom flex">
        <view
          class="button-liveClean button-common flex-center"
          @click="addBill"
        >
          入账
        </view>
        <view
          class="button-liveClean button-common flex-center"
          @click="dirty(101)"
        >
          置脏
        </view>
        <view
          @click="orderDetails"
          class="button-liveClean button-common flex-center"
        >
          订单详情
        </view>
      </view>

      <view v-if="isLiveDirty" class="popup-bottom flex">
        <view
          class="button-liveClean button-common flex-center"
          @click="addBill"
        >
          入账
        </view>
        <view
          class="button-liveClean button-common flex-center"
          @click="dirty(102)"
        >
          清扫
        </view>
        <view
          @click="orderDetails"
          class="button-liveClean button-common flex-center"
        >
          订单详情
        </view>
      </view>

      <view v-if="isEmptinessDirty" class="popup-bottom flex">
        <view
          class="button-emptinessDirty button-common flex-center"
          @click="dirty(1)"
        >
          清扫
        </view>
        <view
          class="button-emptinessDirty button-common flex-center"
          @click="book"
        >
          预订
        </view>
      </view>

      <view v-if="isBooked" class="popup-bottom flex">
        <view class="button-book button-common flex-center" @click="toReceive">
          入住
        </view>
        <view
          class="button-book button-common flex-center"
          @click="orderDetails"
        >
          订单详情
        </view>
      </view>

      <view v-if="isLocked" class="popup-bottom flex">
        <view class="unlock button-common flex-center" @click="unLock">
          解锁
        </view>
      </view>

      <view v-if="isClocked" class="popup-bottom flex">
        <view
          class="button-isClocked button-common flex-center"
          @click="addBill"
        >
          入账
        </view>
        <view class="button-isClocked button-common flex-center" @click="book">
          预订
        </view>
        <view
          class="button-isClocked button-common flex-center"
          @click="orderDetails"
        >
          订单详情
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script lang="ts" setup>
import { ref, watch, computed, onUpdated, toRefs } from 'vue'
import { INF_HomeViews_info, INF_Lock, Lock } from '@/api/server/v2/home'
import {
  INF_ModifyHomeStatus,
  ModifyHomeStatus,
  UnLock
} from '@/api/server/v1/home'
import moment from 'moment'
import route from '@/utils/route'
import { receivePage_detail } from '@/route'
const isEmptinessClean = ref(false)
const isLiveClean = ref(false)
const isLiveDirty = ref(false)
const isEmptinessDirty = ref(false)
const isBooked = ref(false)
const isLocked = ref(false)
const isClocked = ref(false)
const showLock = ref(false)
const showTime = ref(false)

const HomeViews = ref<INF_HomeViews_info>()
const Summary = ref<any>()
const rules = ref({})
const balance = computed(() => {
  const element = HomeViews?.value && HomeViews?.value.ReceiveView
  if (element) return element.Yj - element.Xf
})
const lockForm = ref<INF_Lock>({
  EndTime: '',
  Reason: '',
  RoomNo: '',
  StartTime: ''
})

const statusForm = ref<INF_ModifyHomeStatus>({
  RoomNo: '',
  Flag: ''
})

const props = defineProps({
  popup_data: {
    type: Object,
    default: () => ({})
  },
  Summary: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits<{
  (event: 'refresh'): void
}>()

const stayDays = computed(() => {
  // @ts-ignore
  var date1 = new Date(HomeViews.value?.ReceiveView.CheckIn)
  var date2 = new Date()
  var date = moment(date2).diff(moment(date1).format('YYYY-MM-DD'), 'day')
  return date
})

const orderDetails = () => {
  route.$route_to(
    receivePage_detail + '?id=' + HomeViews.value?.ReceiveView?.ReceiveId
  )
  close()
}

const toReceive = function () {
  route.$route_to(
    '/receivePages/pre/index?TheClassId=' +
      HomeViews.value?.TheClassId +
      '&RoomClass=' +
      HomeViews.value?.TheClass +
      '&RoomNo=' +
      HomeViews.value?.Id +
      '&Price=' +
      HomeViews.value?.Price
  )
  close()
}

const close = () => {
  isEmptinessClean.value = false
  isLiveClean.value = false
  isLiveDirty.value = false
  isEmptinessDirty.value = false
  isBooked.value = false
  isLocked.value = false
  isClocked.value = false
}

// 打开锁房弹窗
const lock = () => {
  showLock.value = true
}
// 锁房解除
const unLock = async () => {
  if (HomeViews.value) await UnLock(HomeViews.value.Id)
  close()
  emit('refresh')
  uni.$u.toast('解锁成功')
}
// 确定锁房
const confirm = async () => {
  // 创建一个Date对象，它将表示当前的日期和时间
  var now = new Date()
  // 使用getFullYear, getMonth和getDate方法获取年份、月份和日期
  var year = now.getFullYear()
  var month: number | string = now.getMonth() + 1 // getMonth返回的是0-11的值，所以需要+1
  var date: number | string = now.getDate()
  // 确保我们总是获取两位数的月份和日期
  month = (month < 10 ? '0' : '') + month
  date = (date < 10 ? '0' : '') + date
  // 组合成所需的格式 'YYYY-MM-DD'
  var formattedDate = year + '-' + month + '-' + date
  lockForm.value.StartTime = formattedDate
  await Lock({ Data: { Value: lockForm.value } })
  showLock.value = false
  close()
  setTimeout(() => uni.$u.toast('锁房成功'), 300)

  // uni.$u.toast('锁房成功')
  lockForm.value.Reason = ''
  lockForm.value.EndTime = ''
}
// 修改房态
const dirty = async (type: number) => {
  statusForm.value.OldFlag = type.toString()
  switch (type) {
    case 0:
      statusForm.value.Flag = '1'
      break
    case 1:
    case 2:
      statusForm.value.Flag = '0'
      break
    case 100: // 100 -今日入住
    case 101: // 101 -住净
    case 103: // 103 -预离
    case 106: // 106 -长包房
      statusForm.value.Flag = '102'
      break
    case 102:
      statusForm.value.Flag = '101'
      break
    default:
      break
  }
  await ModifyHomeStatus(statusForm.value)
  uni.$u.toast('修改成功')
  close()
  if (
    statusForm.value.OldFlag === '1' ||
    statusForm.value.OldFlag === '2' ||
    statusForm.value.OldFlag === '102'
  )
    emit('refresh')
}
// 日期选择器变化
const change = (e: string) => {
  lockForm.value.EndTime = e
}
// 入账
const addBill = () => {
  route.$route_to(
    '/receivePages/detail/AddBill/index?id=' +
      HomeViews.value?.ReceiveView?.ReceiveId
  )
  close()
}

const book = () => {
  route.$route_to('/bookPages/book/pre/newAdd')
  close()
}

defineExpose({
  isEmptinessClean,
  isLiveClean,
  isLiveDirty,
  isEmptinessDirty,
  isBooked,
  isLocked,
  isClocked
})
watch(
  () => props.popup_data,
  (value: any) => {
    HomeViews.value = value
    // console.log(HomeViews.value, 'popup data')
  },
  { immediate: true, deep: true }
)
watch(
  () => props.Summary,
  (value: any) => {
    Summary.value = value
    // console.log(Summary.value, 'Summary data')
  },
  { immediate: true, deep: true }
)
watch(
  isEmptinessClean ||
    isLiveClean ||
    isLiveDirty ||
    isEmptinessDirty ||
    isBooked ||
    isLocked ||
    isClocked,
  (val) => {
    if (!val) emit('refresh')
  }
)
onUpdated(() => {
  if (HomeViews.value) {
    lockForm.value.RoomNo = HomeViews.value.Id
    statusForm.value.RoomNo = HomeViews.value.Id
  }
})
</script>

<style lang="scss" scoped>
.popup {
  height: 756rpx;
  .pop-title {
    height: 126rpx;
    line-height: 126rpx;
    padding-left: 44rpx;
    padding-right: 52rpx;
    align-items: center;
    .close {
      width: 20rpx;
      height: 20rpx;
    }
  }
  .popup-content {
    .balance {
      padding: 0 44rpx;
      height: 80rpx;
      background: #cee6fd;
    }
    .consumption {
      padding: 0 44rpx;
      height: 80rpx;
      background: #eff7ff;
    }
    .info {
      padding: 0 44rpx;
      .info-item {
        margin-top: 20rpx;
      }
    }
  }
  .popup-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    .button-common {
      height: 80rpx;
      background: #f2f3f6;
      border: 2rpx solid #e5e5e5;
    }

    .button {
      width: 186rpx;
      color: #ff6c66;
    }
    .button:nth-child(n + 2) {
      color: #409eff;
    }
    .button:nth-child(4) {
      background: #409eff;
      color: #ffffff;
    }
    .button-liveClean {
      width: 250rpx;
      color: #409eff;
    }
    .button-liveClean:nth-child(3) {
      background: #409eff;
      color: #ffffff;
    }
    .button-book {
      width: 374rpx;
      color: #409eff;
    }
    .button-book:nth-child(2) {
      background: #409eff;
      color: #ffffff;
    }
    .unlock {
      width: 750rpx;
      color: #47cc2a;
    }
    .button-emptinessDirty {
      width: 375rpx;
      color: #409eff;
    }
    .button-emptinessDirty:nth-child(2) {
      background: #409eff;
      color: #ffffff;
    }
    .button-isClocked {
      width: 250rpx;
      color: #409eff;
    }
    .button-isClocked:nth-child(3) {
      background: #409eff;
      color: #ffffff;
    }
  }
}

.book-content {
  margin-top: 50rpx;
  margin-left: 44rpx;
}
.tip {
  color: #f89900;
  font-size: 24rpx;
}
:deep(.u-divider) {
  margin: 0 30rpx !important;
}
// :deep(.u-textarea){
//   background-color: red !important;
//   height: 180rpx !important;
// }
.textarea {
  border: 2rpx solid #e5e5e5;
  height: 180rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 24rpx;
  width: 560rpx;
}
</style>
